<template>
  <section>
    <van-sticky>
      <PageHeader title="兼职红娘"/>
    </van-sticky>

    <div class="bg-color-white pd10 font-common">
      <p>请根据自己的需求，选择成为不同的推广大使。不同的类型、等级，奖励的比例不同。</p>
      <p class="mt10"><strong>城市运营商</strong>：负责在所在城市开展活动、拓展用户、发展会员。对于所在城市的会员所有的消费，无论该会员是否是由城市运营商推荐注册的，城市运营商都将获得一定的奖励。如有意成为美恋婚恋系统城市运营商，请与客服联系。<van-button round size="mini" type="primary" @click="servicePopupVisible=true">联系客服</van-button></p>
      <p class="mt10"><strong>直属粉丝</strong>：红娘直接推荐注册的会员即为该红娘的直属粉丝。</p>
      <p class="mt10"><strong>间接粉丝</strong>：红娘的直属粉丝推荐注册的会员即为该红娘的间接粉丝。</p>
      <p class="mt10"><strong>举例</strong>：红娘A推荐B注册为会员，则B为A的直属粉丝，B推荐C注册为会员，则C为A的间接粉丝，同时C为B的直属粉丝。</p>
      <p class="mt10">推荐关系只计算两级。</p>
    </div>

    <div class="pd10 strong font-biger">奖励比例：</div>
    <div class="bg-color-white pd10 font-common" v-if="siteConfig">
      <van-row class="border-bottom-gray pt10 pb10">
        <van-col :span="6" class="strong">项目</van-col>
        <van-col :span="6" class="strong">直属粉丝</van-col>
        <van-col :span="6" class="strong">间接粉丝</van-col>
        <van-col :span="6" class="strong">城市运营商</van-col>
      </van-row>

      <van-row class="border-bottom-gray pt10 pb10">
        <van-col :span="6">开通/升级VIP</van-col>
        <van-col :span="6">{{siteConfig.matchmaker_salary_ratio.vip_level_1}}%</van-col>
        <van-col :span="6">{{siteConfig.matchmaker_salary_ratio.vip_level_2}}%</van-col>
        <van-col :span="6">{{siteConfig.matchmaker_salary_ratio.vip_level_10}}%</van-col>
      </van-row>

      <van-row class="border-bottom-gray pt10 pb10">
        <van-col :span="6">解锁手机号</van-col>
        <van-col :span="6">{{siteConfig.matchmaker_salary_ratio.unlock_phone_1}}%</van-col>
        <van-col :span="6">{{siteConfig.matchmaker_salary_ratio.unlock_phone_2}}%</van-col>
        <van-col :span="6">{{siteConfig.matchmaker_salary_ratio.unlock_phone_10}}%</van-col>
      </van-row>

      <van-row class="border-bottom-gray pt10 pb10">
        <van-col :span="6">解锁微信号</van-col>
        <van-col :span="6">{{siteConfig.matchmaker_salary_ratio.unlock_wxid_1}}%</van-col>
        <van-col :span="6">{{siteConfig.matchmaker_salary_ratio.unlock_wxid_2}}%</van-col>
        <van-col :span="6">{{siteConfig.matchmaker_salary_ratio.unlock_wxid_10}}%</van-col>
      </van-row>

      <van-row class="border-bottom-gray pt10 pb10">
        <van-col :span="6">实名认证</van-col>
        <van-col :span="6">{{siteConfig.matchmaker_salary_ratio.faceid_detect_1}}%</van-col>
        <van-col :span="6">{{siteConfig.matchmaker_salary_ratio.faceid_detect_2}}%</van-col>
        <van-col :span="6">{{siteConfig.matchmaker_salary_ratio.faceid_detect_10}}%</van-col>
      </van-row>

      <van-row class="border-bottom-gray pt10 pb10">
        <van-col :span="6">参加活动</van-col>
        <van-col :span="6">{{siteConfig.matchmaker_salary_ratio.activity_1}}%</van-col>
        <van-col :span="6">{{siteConfig.matchmaker_salary_ratio.activity_2}}%</van-col>
        <van-col :span="6">{{siteConfig.matchmaker_salary_ratio.activity_10}}%</van-col>
      </van-row>

      <van-row class="border-bottom-gray pt10 pb10">
        <van-col :span="6">解锁聊天</van-col>
        <van-col :span="6">{{siteConfig.matchmaker_salary_ratio.unlock_chat_session_1}}%</van-col>
        <van-col :span="6">{{siteConfig.matchmaker_salary_ratio.unlock_chat_session_2}}%</van-col>
        <van-col :span="6">{{siteConfig.matchmaker_salary_ratio.unlock_chat_session_10}}%</van-col>
      </van-row>

      <van-row class="border-bottom-gray pt10 pb10">
        <van-col :span="6">购买课程</van-col>
        <van-col :span="6">{{siteConfig.matchmaker_salary_ratio.course_1}}%</van-col>
        <van-col :span="6">{{siteConfig.matchmaker_salary_ratio.course_2}}%</van-col>
        <van-col :span="6">{{siteConfig.matchmaker_salary_ratio.course_10}}%</van-col>
      </van-row>

      <van-row class="border-bottom-gray pt10 pb10">
        <van-col :span="6">购买红娘服务</van-col>
        <van-col :span="6">{{siteConfig.matchmaker_salary_ratio.service_package_1}}%</van-col>
        <van-col :span="6">{{siteConfig.matchmaker_salary_ratio.service_package_2}}%</van-col>
        <van-col :span="6">{{siteConfig.matchmaker_salary_ratio.service_package_10}}%</van-col>
      </van-row>
    </div>

    <div class="empty-box"></div>

    <div class="flex flex-row flex-center bg-color-white bottom-wrapper">
      <div class="flex flex-row flex-center flex-1 item pl10 pr10">
        <van-button round block type="primary" :disabled="user && user.is_matchmaker==1" @click="apply">
          <span v-if="!user || (user && user.is_matchmaker==0)">申请成为红娘</span>
          <span v-else-if="user && user.is_matchmaker==1">您已是红娘</span>
        </van-button>
      </div>
    </div>

    <van-popup v-model="servicePopupVisible" :style="{ width: '60%' }">
      <div class="text-center mt10">
        摩西客服
      </div>

      <div class="text-center mt10">
        <img :src="STATIC_BASE_URL + 'images/mp/service-wx.jpg'" height="200" width="200"/>
      </div>

      <div class="text-center mt5 mb20 font-big">
        长按二维码添加客服
      </div>
    </van-popup>
  </section>
</template>

<script>
  import Vue from 'vue';
  import {Toast, Dialog, Sticky, Button, Popup, Row, Col} from 'vant';
  import {matchmakerApplyUri, STATIC_BASE_URL} from "../../common/api";
  import PageHeader from "../componets/PageHeader";
  Vue.use(Toast).use(Dialog).use(Sticky).use(Button).use(Popup).use(Row).use(Col);

  export default {
    components: {
      PageHeader
    },
    data() {
      return {
        STATIC_BASE_URL: STATIC_BASE_URL,
        servicePopupVisible: false,
        member: null,
        user: null,
        siteConfig: null
      }
    },
    methods: {
      apply() {
        if(!this.GLOBAL.userInfo) {
          this.$router.push({name: 'UserLogin'});
          return;
        }
        if(this.member.realname_auth_status == 0) {
          Toast('请先完成实名认证');
          this.$router.push({name: 'MyAuthIndex'});
          return;
        }

        const that = this;
        this.$http.get(matchmakerApplyUri).then(response => {
          let {code, msg, data} = response.body
          if (code != 0) {
            that.toast(msg);
          } else {
            that.user.is_matchmaker = 1;
            that.GLOBAL.userInfo = that.user;
            Toast('申请成功');
          }
        }, response => {
          // error callback
        })
      }
    },
    mounted: function () {
      this.member = this.GLOBAL.memberProfile;
      this.user = this.GLOBAL.userInfo;
      this.siteConfig = this.GLOBAL.siteConfig;

      this.EventBus.$on('OnUserLogined', () => {
        this.user = this.GLOBAL.userInfo;
        this.member = this.GLOBAL.memberProfile;
      });

      this.EventBus.$on('OnMemberAuth', () => {
        this.member = this.GLOBAL.memberProfile;
      });

      this.EventBus.$on('OnSiteConfigLoaded', () => {
        this.siteConfig = this.GLOBAL.siteConfig;
      });
    }
  }
</script>

<style scoped>
  .empty-box {
    height: calc(50px + env(safe-area-inset-bottom));
  }

  .bottom-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }

  .bottom-wrapper .item {
    height: 50px;
  }

  .bottom-wrapper .item .iconfont {
    font-size: 20px;
  }
</style>
